<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 移动 -->
    /* transform: translate(x,y,z) */
    /* 移动,和相对定位类似,移动后保留位置 */

    <!-- 旋转 -->
    transform: rotate(360deg);
    要先写移动,在写旋转,旋转单位为deg,意为 度


    <!-- 圆心 -->
    transform-origin: -100% 50%;
    确定旋转的圆心坐标,可以用left,centerd或者百分数以及具体像素值

    <!-- 动画 -->
    /* animation:
    name(动画名称)
    duration(动画时间) 单位为s
    timing-function(运动曲线) 默认是ease,匀速是linear
    delay(延时何时开始) 单位为秒
    iteration-count(动画执行次数) 无单位,无限次为infinite
    direction(是否在下一周期逆向播放) alternate
    fill-mode(结束时停留在); 最终位置forwards backwards回到起点
    */

    @keyframes name {
    100%{}
    }
    在元素中调用 name以使用动画

</body>

</html>